import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { useRef } from 'react';
import { DeviceHeartbeatItem } from './types';
import { getHeartbeatDataList } from './service';
import RemoteSelect from '@/components/RemoteSelect';
import { getTenantList } from '@/pages/Tenant/Tenant/service';
import { useModel } from 'umi';

export default () => {
  const { initialState } = useModel('@@initialState');
  console.log('initialState', initialState);

  const currUser = initialState?.currentUser?.permissions;
  const { 'HEARTBEAT.VIEW': heartbeat, 'IDENTIFY.VIEW': identify } = currUser;

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<DeviceHeartbeatItem>[] = [
    {
      title: '所属用户',
      dataIndex: 'tenant_id',
      onFilter: true,
      ellipsis: true,

      renderFormItem: () => (
        <RemoteSelect
          getPopupContainer={(triggerNode) => triggerNode.parentElement} // 保证选择菜单不会随着页面滚动
          fieldNames={{ key: 'id', value: 'id', label: 'name' }}
          request={() => getTenantList({})}
        />
      ),
    },
    {
      title: '设备号',
      dataIndex: 'dev_name',
      ellipsis: true,
    },
    {
      title: '产品名',
      dataIndex: 'product',
      search: false,
      ellipsis: true,
    },
    {
      title: 'ip地址',
      dataIndex: 'ip',
      search: false,
      ellipsis: true,
    },
    {
      title: 'ipV6地址',
      dataIndex: 'ip_v6',
      search: false,
      ellipsis: true,
    },
    {
      title: '设备sn',
      dataIndex: 'sn',
      search: false,
      ellipsis: true,
    },
    {
      title: '泊位列表',
      dataIndex: 'parking_number',
      search: false,
      ellipsis: true,
    },
    {
      title: '上报时间',
      dataIndex: 'report_time',
      search: false,
      ellipsis: true,
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<DeviceHeartbeatItem>
        dateFormatter="string"
        headerTitle="设备心跳列表"
        columns={columns}
        actionRef={actionRef}
        cardBordered
        editable={{
          type: 'multiple',
        }}
        scroll={{ x: true }}
        request={async (params) => {
          params.device_no = params.dev_name;
          params.tenant_id = params.tenant_id?.id;
          params.page = params.current;
          const res = getHeartbeatDataList(params);
          return res;
        }}
        pagination={{
          defaultPageSize: 10,
          size: 'default',
          showQuickJumper: true,
          showSizeChanger: true,
        }}
      />
    </PageHeaderWrapper>
  );
};
